<template>
  <div class="range-selector-container">
    <!-- 无填充进度条 -->
    <div class="range-wrapper" ref="rangeWrapper" :style="{ height: height + 'px' }">
      <!-- 红色分界线 -->
      <div class="range-divider" :style="dividerStyle"></div>

      <!-- 滑块 -->
      <div
          class="slider-thumb"
          :style="thumbStyle"
          @mousedown="onThumbMouseDown"
      ></div>
    </div>
  </div>
</template>

<script setup>
import {ref, computed, defineProps, defineEmits, watch, onMounted} from 'vue';

// 接收父组件传入的属性
const props = defineProps({
  min: {type: Number, default: 0},
  max: {type: Number, default: 100},
  height: {type: Number, default: 30},
  modelValue: {type: Number, required: true},
});

// 定义事件，通知父组件更新值
const emit = defineEmits(['update:modelValue']);

// 本地数据更新和父组件值绑定
const value = ref(props.modelValue);

// 获取进度条容器元素
const rangeWrapper = ref(null);

// 监听父组件值变化同步更新
watch(
    () => props.modelValue,
    (newValue) => {
      value.value = newValue;
    }
);

// 计算红色分界线的位置
const dividerStyle = computed(() => {
  const percentage = ((value.value - props.min) / (props.max - props.min)) * 100;
  return {
    left: `calc(${percentage}% - 1px)`,
    position: 'absolute',
    top: 0,
    height: '100%',
    width: '2px',
    backgroundColor: '#f44336', // 红色
  };
});

// 计算滑块的位置
const thumbStyle = computed(() => {
  const percentage = ((value.value - props.min) / (props.max - props.min)) * 100;
  return {
    left: `calc(${percentage}% - 12px)`, // 滑块偏移
    position: 'absolute',
    top: 0,
    width: '24px',
    height: '100%',
    backgroundColor: 'rgba(255, 255, 255, 0.5)', // 半透明白色
    cursor: 'pointer',
  };
});

// 更新滑块值并通知父组件
const updateValue = (event) => {
  const rect = rangeWrapper.value.getBoundingClientRect();
  const offsetX = event.clientX - rect.left;
  const newPercentage = Math.min(Math.max(offsetX / rect.width, 0), 1);
  const newValue = Math.round(newPercentage * (props.max - props.min) + props.min);

  value.value = newValue;
  emit('update:modelValue', newValue); // 通知父组件
};

// 处理滑块拖动事件
const onThumbMouseDown = (event) => {
  event.preventDefault();
  updateValue(event);

  const onMouseMove = (event) => {
    updateValue(event);
  };

  const onMouseUp = () => {
    document.removeEventListener('mousemove', onMouseMove);
    document.removeEventListener('mouseup', onMouseUp);
  };

  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', onMouseUp);
};

// 确保组件挂载时能够初始化值
onMounted(() => {
  updateValue({clientX: rangeWrapper.value.getBoundingClientRect().left});
});
</script>

<style scoped>
.range-selector-container {
  width: 100%;
}

.range-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #FEB009, #DDA54E, #D0A16A, #C39D88, #8892C8, #3185EB, #037FFF);

}

.range-divider {
  position: absolute;
  top: 0;
  height: 100%;
  width: 2px;
  background-color: #f44336; /* 红色 */
  z-index: 1;
}

.slider-thumb {
  position: absolute;
  top: 0;
  transform: translateY(0%);
  width: 24px; /* 滑块宽度 */
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5); /* 半透明白色滑块 */
  cursor: pointer;
  z-index: 2;
}
</style>
